<template>
  <div
    class="menu-tree-box w-full h-full overflow-hidden overflow-y-auto box-border"
    :style="{background: 'none'}"
  >
    <a-tree
      v-if="props.account && treeShow && props.serviceName"
      blockNode
      checkable
      multiple
      :check-strictly="true"
      checked-strategy="all"
      :checked-keys="nodeChecked"
      :field-names="{
        key: 'code',
        children: 'children',
        title: 'menu_name',
      }"
      :data="menuHandlered"
      @check="(ckeck as any)"
    >
      <template #title="{menu_name}">
        <span class="" style="
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        color: #465A80;
        ">{{ menu_name }}</span>
      </template>
   </a-tree>
  </div>
</template>

<script lang="ts" setup>
import { watch, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// import { Columns } from './values';
import * as Api from '@/api/user/useManagement';
import * as T from '@/api/user/userManagement_type';
import { Message } from '@arco-design/web-vue';
import { getTreeData } from './values';

const props = defineProps({
  account: {
    type: String,
    default: ''
  },
  roleId: {
    type: Number,
    default: undefined
  },
  disChecked: {
    type: Boolean,
    default: false
  },
  serviceName: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['checked'])
const menuHandlered = ref<any[]>([])
const menusArr = ref<T.TSysMenuItem[]>([])
const defaultExpandMenus = ref<any[]>([])
const nodeChecked = ref<any[]>([])
const treeShow = ref(false)

// 系统菜单树
interface TMenusTree extends T.TSysMenuItem {
  id: number
  key: number
  title: string
  child: TMenusTree[]
}

function ckeck(checked: number[]) {
  nodeChecked.value = [...checked]
  emits('checked', [...checked])
}

// 获取系统菜单树
function getSystemMenuTree() {
  if (!props.serviceName) {
    return
  }
  Api.getSysMenuTree(props.serviceName).then(res => {
    if(res.code && res.data) {
      menusArr.value = getTreeData([...res.data.children])
      menuHandlered.value = [...res.data.children]
      defaultExpandMenus.value = []
      menusArr.value.forEach(item => {
        (item as any).disabled = props.disChecked;
        (item as any).selected = props.disChecked
        defaultExpandMenus.value.push(item.code)
        treeShow.value = true
      })
      return
    }
    Message.error('获取系统菜单树失败')
  })
}

// 获取角色菜单
function getRoleMenu(roleId: number | string, call?: any) {
  Api.getRoleMenus(roleId).then(res => {
    const { code, data, message } = res as any
    if(code && data) {
      nodeChecked.value = []
      data.forEach(item => {
        nodeChecked.value.push(item.menu_code) 
      })
      emits('checked', [...nodeChecked.value])
      call ? call() : false;
      return
    }
    Message.error(message)
  })
}

watch(() => props.serviceName, (val) => {
  if(val) {
    getSystemMenuTree()
  }
})
watch(() => props.roleId, (val) => {
  if(val) {
    getRoleMenu(val)
  } else {
    nodeChecked.value = []
  }
})

onMounted(() => {
  // 获得系统菜单
  getSystemMenuTree()
})
</script>

<style lang="less" scoped>

</style>
